<template>
  <section id="overview" class="section overview">
    <div class="container">
      <h2 class="section-title">{{ title }}</h2>
      <div class="overview-content">
        <p v-for="(paragraph, index) in content" :key="index">{{ paragraph }}</p>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'OverviewSection',
  props: {
    title: {
      type: String,
      default: '项目概述'
    },
    content: {
      type: Array,
      default: () => [
        '详细描述项目的背景、目标和解决的问题。这里可以介绍项目的起源、开发的动机以及项目的定位和目标受众等信息。',
        '项目概述应该清晰地传达项目的核心价值主张，让访问者能够快速理解项目的意义和用途。'
      ]
    }
  }
}
</script>

<style scoped>
.section {
  padding: 80px 0;
}

.section-title {
  text-align: center;
  margin-bottom: 50px;
  font-size: 2.5rem;
  color: #333;
}

.overview-content p {
  margin-bottom: 20px;
  line-height: 1.6;
}
</style>
